<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org"
	xmlns:tiles="http://www.thymeleaf.org"
	xmlns:sec="http://www.thymeleaf.org" lang="en">
	<head>
		<meta charset="utf-8" />
		<title>Taxis</title>

		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta name="description" content="" />
		<meta name="author" content="" />

		<!-- basic styles -->

		<script src="../../static/jquery/jquery-2.0.3.min.js" th:src="@{/static/jquery/jquery-2.0.3.min.js}"></script>
		<link href="../../static/bootstrap/css/bootstrap.min.css" th:href="@{/static/bootstrap/css/bootstrap.min.css}" rel="stylesheet" />
		<script src="../../static/bootstrap/js/bootstrap.min.js" th:src="@{/static/bootstrap/js/bootstrap.min.js}"></script>
		<link href="../../static/font-awesome/css/font-awesome.min.css" th:href="@{/static/font-awesome/css/font-awesome.min.css}" rel="stylesheet" />			

		<link href="../../static/jquery/jquery-ui.css" th:href="@{/static/jquery/jquery-ui.css}" rel="stylesheet" />
		<script src="../../static/jquery/jquery-ui.js" th:src="@{/static/jquery/jquery-ui.js}"></script>	
	
		<!-- fonts -->

		<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300" th:href="@{'http://fonts.googleapis.com/css?family=Open+Sans:400,300'}" rel="stylesheet" />		
		
		<!-- ace styles -->

		<link href="../../static/custom/ace.min.css" th:href="@{/static/custom/ace.min.css}" rel="stylesheet" />
		<link href="../../static/custom/ace-rtl.min.css" th:href="@{/static/custom/ace-rtl.min.css}" rel="stylesheet" />
		<link href="../../static/custom/ace-skins.min.css" th:href="@{/static/custom/ace-skins.min.css}" rel="stylesheet" />

		<!--[if lte IE 8]>
		  <link href="../../static/custom/ace.min.css" th:href="@{/static/custom/ace-ie.min.css}" rel="stylesheet" />
		<![endif]-->

		<!-- inline styles related to this page -->

		<!-- ace settings handler -->

		<script src="../../static/custom/ace-extra.min.js" th:src="@{/static/custom/ace-extra.min.js}"></script>

		<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->

		<!--[if lt IE 9]>
		<script src="../../static/custom/html5shiv.js" th:src="@{/static/custom/html5shiv.js}"></script>
		<script src="../../static/custom/respond.min.js" th:src="@{/static/custom/respond.min.js}"></script>
		<![endif]-->		
	</head>

	<body tiles:fragment="content">	
	<link href="../../static/datepicker/datepicker.css" th:href="@{/static/datepicker/datepicker.css}" rel="stylesheet" />	
	<link href="../../static/handsontable/jquery.handsontable.full.css" th:href="@{/static/handsontable/jquery.handsontable.full.css}" rel="stylesheet" />

			<div class="breadcrumbs" id="breadcrumbs">
				<script type="text/javascript">
					try{ace.settings.check('breadcrumbs' , 'fixed')}catch(e){}
				</script>
				<ul class="breadcrumb">
					<li>
						<i class="fa fa-home home-icon"></i>								
						<a href='/' th:href="@{/}">Inicio</a>
					</li>
					<li>
						<a href="/serviciosRecientes" th:href="@{/serviciosRecientes}">Reserva de Servicios</a>
					</li>
					<li>
						<a href="/historialServicios" th:href="@{/historialServicios}">Historial de Servicios</a>
					</li>
					<li class="active">Detalle Servicio</li>
				</ul><!-- .breadcrumb -->
			</div>			
			<div class="page-content">
				<div class="page-header">
					<h1>
						Orden de Servicio
						<small>
							<i class="fa fa-angle-double-right"></i>
							Evaluar servicio
						</small>
					</h1>
				</div><!-- /.page-header -->
				<div class="row">
					<div class="col-xs-12">						
						<div class="col-sm-11">
							<div class="widget-box">
								<div class="widget-header widget-header-flat">
									<h4>Informaci&oacute;n del servicio</h4>
								</div>
	
								<div class="widget-body">
									<div class="widget-main">
										<div class="row">
											<div class="col-xs-12">
												<div class="col-xs-12">
													<div class="col-xs-2 ">
														Pasajero:
													</div>
													<div class="col-xs-3">
														<p th:text="${ordenServicio.pasajero.nombreCompleto}">Pedro Lopez</p>
													</div>
													<div class="col-xs-3">
														<div class="col-xs-6 text-right">
															Doc. Id.:
														</div>
														<div class="col-xs-6">
															<p th:text="${ordenServicio.pasajero.numDocumento}">84623487</p>
														</div>
													</div>
													<div class="col-xs-4">
														<div class="col-xs-6 text-right">
															Celular:
														</div>
														<div class="col-xs-6">
															<p th:text="${ordenServicio.pasajero.todosTelefonos}">992757363</p>
														</div>
													</div>
													
												</div>
											</div>											
											<div class="col-xs-12">
												<hr/>
												<div class="col-xs-12">
													<div class="col-xs-2 ">
														Fecha reserva:
													</div>
													<div class="col-xs-3">
														<p th:text="${ordenServicio.fechaServicio}">10/10/2010</p>
													</div>
													<div class="col-xs-3 ">
														<div class="col-xs-6 text-right">
															Tipo de servicio:
														</div>
														<div class="col-xs-6">
															<p th:text="${ordenServicio.tipoServicio}">Punto a punto</p>
														</div>														
													</div>
												</div>
											</div>
											<div class="col-xs-12">
												<hr/>
												<div class="col-xs-12">
													<div class="col-xs-2">
														Origen:
													</div>
													<div class="col-xs-3">
														<p th:text="${ordenServicio.puntoOrigen.zona.nombre + ' - ' + ordenServicio.puntoOrigen.direccion}">San Miguel - Av La Marina XXX</p>
														<input type="hidden" id="latitudOrigen" th:value="${ordenServicio.puntoOrigen.latitud}"/>
														<input type="hidden" id="longitudOrigen" th:value="${ordenServicio.puntoOrigen.longitud}"/>
													</div>
												</div>
											</div>
											<div class="col-xs-12">
												<hr/>
												<div class="col-xs-12">
													<div class="col-xs-2">
														<p>Destinos:</p>
													</div>													
													<div class="col-xs-12">
														<div class="table-responsive">
															<table id="tabla-destinos" class="table table-bordered table-hover table-striped">
																<thead>
																	<tr>
																		<th>Nro</th>
																		<th>Direcci&oacute;n</th>
																		<th>Hora Partida</th>
																		<th>Hora Llegada</th>
																		<th>Peaje S/.</th>
																		<th>Estac. S/.</th>
																		<th>Espera min.</th>
																		<th>Espera S/.</th>
																		<th>Por Hora hor.</th>
																		<th>Tarifa S/.</th>
																		<th>Total S/.</th>
																		<th>Latitud</th>
																		<th>Longitud</th>
																	</tr>
																</thead>
																<tbody>
																	<tr th:each="destino, rowStat : ${ordenServicio.destinos}">
																		<td th:text="${rowStat.index + 1}">1</td>
																		<td th:text="${destino.puntoDestino.zona.nombre} + ' - ' + ${destino.puntoDestino.direccion}">Comas 1 - Calle Beta Mz. M</td>
																		<td th:text="${#dates.format(destino.horaInicioDestino, #messages.msg('date.formatHora'))}">14:30</td>
																		<td th:text="${#dates.format(destino.horaLlegadaDestino, #messages.msg('date.formatHora'))}">14:30</td>
																		<td th:text="${destino.peaje}">10.00</td>
																		<td th:text="${destino.estacionamiento}">10.00</td>
																		<td th:text="${ordenServicio.getDemoraDestino(__${rowStat.index}__)}"> 0</td>
																		<td></td>
																		<td th:text=" ${ordenServicio.tipoServicio != 'punto a punto' and ordenServicio.tipoServicio != 'courier'} ? ${destino.totalHoras}"> 0</td>
																		<td th:text="${destino.tarifa}">10.00</td>
																		<td th:text="${destino.tarifa + destino.peaje + destino.estacionamiento}">30.00</td>
																		<td th:text="${destino.puntoDestino.latitud}">10.4334543456</td>
																		<td th:text="${destino.puntoDestino.longitud}">-10.4235423536</td>
																	</tr>
																</tbody>
															</table>
														</div>
													</div>
													<div class="col-xs-4 col-xs-offset-8">
														<div class="space"></div>
														
														<div class="col-xs-4 col-xs-offset-4">
															<strong>Total</strong>
														</div>
														<div class="col-xs-4 text-right">
															<strong>S/. <span th:text="${ordenServicio.totalServicio}">10.00</span></strong>
														</div>
													</div>
												</div>
											</div>								
										</div>
									</div>
								</div>
							</div>
							<div class="space"></div>
							<div class="widget-box">
								<div class="widget-header widget-header-flat">
									<h4>Evaluaci&oacute;n del servicio</h4>
								</div>
	
								<div class="widget-body">
									<div class="widget-main">
										<div class="row">
											<form action="#" th:action="@{/evaluarServicio}" th:object="${ordenServicio}" method="post">
												<input type="hidden" th:field="*{numReserva}"/>
												<div class="col-xs-12">
													<div class="col-xs-12">
														<div class="col-xs-12">
															<div class="col-xs-4">
																<div class="col-xs-12">
																	<div class="col-xs-12">
																		<strong><p>Conductor</p></strong>
																	</div>
																	<div class="col-xs-6">
																		<p>C&oacute;digo</p>
																	</div>
																	<div class="col-xs-6">
																		<p th:text="${ordenServicio.unidadMovil.conductor.codConductor}">124</p>
																	</div>
																	<div class="col-xs-6">
																		<p>Nombre</p>
																	</div>
																	<div class="col-xs-6">
																		<p th:text="${ordenServicio.unidadMovil.conductor.nombreCompleto}">Cesar Gomez</p>
																	</div>
																	<div class="col-xs-6">
																		<p th:text="${ordenServicio.unidadMovil.conductor.todosTelefonos}">Celular</p>
																	</div>
																	<div class="col-xs-6">
																		<p>94353246</p>
																	</div>
																</div>													
																<div class="col-xs-12 center">
																	<img alt="conductor" th:src="@{getFotoConductor/} + ${ordenServicio.unidadMovil.conductor.codConductor}" title="Conductor"  height="200" width="200"/>
																</div>
															</div>
															<div class="col-xs-8">
																<div class="col-xs-3">
																	<div class="control-group">	
																		<div class="space"></div>
																		<label class="control-label bolder blue">Presentable</label>			
																		<div class="radio">
																			<label>
																				<input name="rPresentable" type="radio" class="ace" value="3" th:field="*{evaluacionConductor.calPresentable}"/>
																				<span class="lbl"> Bueno</span>
																			</label>
																		</div>
																		<div class="radio">
																			<label>
																				<input name="rPresentable" type="radio" class="ace" value="2" th:field="*{evaluacionConductor.calPresentable}"/>
																				<span class="lbl"> Regular</span>
																			</label>
																		</div>
																		<div class="radio">
																			<label>
																				<input name="rPresentable" type="radio" class="ace" value="1" th:field="*{evaluacionConductor.calPresentable}"/>
																				<span class="lbl"> Malo</span>
																			</label>
																		</div>
																	</div>
																</div>
																<div class="col-xs-3">
																	<div class="control-group">
																		<div class="space"></div>	
																		<label class="control-label bolder blue">Amable</label>			
																		<div class="radio">
																			<label>
																				<input name="rAmable" type="radio" class="ace" value="3" th:field="*{evaluacionConductor.calAmable}"/>
																				<span class="lbl"> Bueno</span>
																			</label>
																		</div>
																		<div class="radio">
																			<label>
																				<input name="rAmable" type="radio" class="ace" value="2" th:field="*{evaluacionConductor.calAmable}"/>
																				<span class="lbl"> Regular</span>
																			</label>
																		</div>
																		<div class="radio">
																			<label>
																				<input name="rAmable" type="radio" class="ace" value="1" th:field="*{evaluacionConductor.calAmable}"/>
																				<span class="lbl"> Malo</span>
																			</label>
																		</div>
																	</div>
																</div>
																<div class="col-xs-3">
																	<div class="control-group">	
																		<div class="space"></div>
																		<label class="control-label bolder blue">Manejo</label>			
																		<div class="radio">
																			<label>
																				<input name="rManejo" type="radio" class="ace" value="3" th:field="*{evaluacionConductor.calManejo}"/>
																				<span class="lbl"> Bueno</span>
																			</label>
																		</div>
																		<div class="radio">
																			<label>
																				<input name="rManejo" type="radio" class="ace" value="2" th:field="*{evaluacionConductor.calManejo}"/>
																				<span class="lbl"> Regular</span>
																			</label>
																		</div>
																		<div class="radio">
																			<label>
																				<input name="rManejo" type="radio" class="ace" value="1" th:field="*{evaluacionConductor.calManejo}"/>
																				<span class="lbl"> Malo</span>
																			</label>
																		</div>
																	</div>
																</div>
																<div class="col-xs-3">
																	<div class="control-group">	
																		<div class="space"></div>
																		<label class="control-label bolder blue">Sonriente</label>			
																		<div class="radio">
																			<label>
																				<input name="rSonriente" type="radio" class="ace" value="3" th:field="*{evaluacionConductor.calSonriente}"/>
																				<span class="lbl"> Siempre</span>
																			</label>
																		</div>
																		<div class="radio">
																			<label>
																				<input name="rSonriente" type="radio" class="ace" value="2" th:field="*{evaluacionConductor.calSonriente}"/>
																				<span class="lbl"> A veces</span>
																			</label>
																		</div>
																		<div class="radio">
																			<label>
																				<input name="rSonriente" type="radio" class="ace" value="1" th:field="*{evaluacionConductor.calSonriente}"/>
																				<span class="lbl"> Nunca</span>
																			</label>
																		</div>
																	</div>
																</div>
																<div class="col-xs-4">
																	<div class="space"></div>
																	<div class="control-group">
																		<label class="control-label bolder blue">Incidentes</label>					
																		<div class="checkbox">
																			<label>
																				<input name="form-field-checkbox" type="checkbox" class="ace" th:field="*{evaluacionConductor.incTarde}"/>
																				<span class="lbl"> Lleg&oacute; tarde</span>
																			</label>
																		</div>					
																		<div class="checkbox">
																			<label>
																				<input name="form-field-checkbox" type="checkbox" class="ace" th:field="*{evaluacionConductor.incDiscute}"/>
																				<span class="lbl"> Discuti&oacute; con cliente</span>
																			</label>
																		</div>
																		<div class="checkbox">
																			<label>
																				<input name="form-field-checkbox" type="checkbox" class="ace" th:field="*{evaluacionConductor.incIncumpleLeyes}"/>
																				<span class="lbl"> Falt&oacute; leyes de tr&aacute;nsito</span>
																			</label>
																		</div>
																	</div>
																</div>
																<div class="col-xs-8">
																	<div class="space"></div>
																	<label for="comCond">Comentarios</label>		
																	<textarea class="form-control" id="comCond" rows="4" th:field="*{evaluacionConductor.comentarios}"></textarea>
																</div>
															</div>
														</div>													
														<div class="col-xs-12">	
															<hr/>																									
															<div class="col-xs-4">
																<div class="col-xs-12">
																	<div class="col-xs-12">
																		<strong><p>Veh&iacute;culo</p></strong>
																	</div>
																	<div class="col-xs-6">
																		<p>C&oacute;digo</p>
																	</div>
																	<div class="col-xs-6">
																		<p th:text="${ordenServicio.unidadMovil.vehiculo.codVehiculo}">124</p>
																	</div>
																	<div class="col-xs-6">
																		<p>Modelo</p>
																	</div>
																	<div class="col-xs-6">
																		<p th:text="${ordenServicio.unidadMovil.vehiculo.marca + ' ' + ordenServicio.unidadMovil.vehiculo.modelo}">Chevrolet Optra</p>
																	</div>
																	<div class="col-xs-6">
																		<p>Placa</p>
																	</div>
																	<div class="col-xs-6">
																		<p th:text="${ordenServicio.unidadMovil.vehiculo.numPlaca}">AZ546</p>
																	</div>
																</div>													
																<div class="col-xs-12 center">
																	<img alt="vehiculo" th:src="@{getFotoVehiculo/} + ${ordenServicio.unidadMovil.vehiculo.codVehiculo}" title="Vehiculo"  height="200" width="200"/>
																</div>
															</div>
															<div class="col-xs-8">
																<div class="col-xs-3">
																	<div class="control-group">	
																		<div class="space"></div>
																		<label class="control-label bolder blue">Presentable</label>			
																		<div class="radio">
																			<label>
																				<input name="rVPresentable" type="radio" class="ace" value="3" th:field="*{evaluacionVehiculo.calPresentable}"/>
																				<span class="lbl"> Bueno</span>
																			</label>
																		</div>
																		<div class="radio">
																			<label>
																				<input name="rVPresentable" type="radio" class="ace" value="2" th:field="*{evaluacionVehiculo.calPresentable}"/>
																				<span class="lbl"> Regular</span>
																			</label>
																		</div>
																		<div class="radio">
																			<label>
																				<input name="rVPresentable" type="radio" class="ace" value="1" th:field="*{evaluacionVehiculo.calPresentable}"/>
																				<span class="lbl"> Malo</span>
																			</label>
																		</div>
																	</div>
																</div>
																<div class="col-xs-3">
																	<div class="control-group">
																		<div class="space"></div>	
																		<label class="control-label bolder blue">Olor interior</label>			
																		<div class="radio">
																			<label>
																				<input name="rOlor" type="radio" class="ace"  value="3" th:field="*{evaluacionVehiculo.calOlor}"/>
																				<span class="lbl"> Bueno</span>
																			</label>
																		</div>
																		<div class="radio">
																			<label>
																				<input name="rOlor" type="radio" class="ace" value="2" th:field="*{evaluacionVehiculo.calOlor}"/>
																				<span class="lbl"> Regular</span>
																			</label>
																		</div>
																		<div class="radio">
																			<label>
																				<input name="rOlor" type="radio" class="ace" value="1" th:field="*{evaluacionVehiculo.calOlor}"/>
																				<span class="lbl"> Malo</span>
																			</label>
																		</div>
																	</div>
																</div>
																<div class="col-xs-3">
																	<div class="control-group">	
																		<div class="space"></div>
																		<label class="control-label bolder blue">Limpio</label>			
																		<div class="radio">
																			<label>
																				<input name="rLimpio" type="radio" class="ace" value="3" th:field="*{evaluacionVehiculo.calLimpio}"/>
																				<span class="lbl"> Bueno</span>
																			</label>
																		</div>
																		<div class="radio">
																			<label>
																				<input name="rLimpio" type="radio" class="ace" value="2" th:field="*{evaluacionVehiculo.calLimpio}"/>
																				<span class="lbl"> Regular</span>
																			</label>
																		</div>
																		<div class="radio">
																			<label>
																				<input name="rLimpio" type="radio" class="ace" value="1" th:field="*{evaluacionVehiculo.calLimpio}"/>
																				<span class="lbl"> Malo</span>
																			</label>
																		</div>
																	</div>
																</div>
																<div class="col-xs-3">
																	<div class="control-group">	
																		<div class="space"></div>
																		<label class="control-label bolder blue">Entretenimiento</label>			
																		<div class="radio">
																			<label>
																				<input name="rEntret" type="radio" class="ace" value="3" th:field="*{evaluacionVehiculo.calEntretenimiento}"/>
																				<span class="lbl"> Bueno</span>
																			</label>
																		</div>
																		<div class="radio">
																			<label>
																				<input name="rEntret" type="radio" class="ace" value="2" th:field="*{evaluacionVehiculo.calEntretenimiento}"/>
																				<span class="lbl"> Regular</span>
																			</label>
																		</div>
																		<div class="radio">
																			<label>
																				<input name="rEntret" type="radio" class="ace" value="1" th:field="*{evaluacionVehiculo.calEntretenimiento}"/>
																				<span class="lbl"> Malo</span>
																			</label>
																		</div>
																	</div>
																</div>
																<div class="col-xs-4">
																	<div class="space"></div>
																	<div class="control-group">
																		<label class="control-label bolder blue">Incidentes</label>					
																		<div class="checkbox">
																			<label>
																				<input name="form-field-checkbox" type="checkbox" class="ace" th:field="*{evaluacionVehiculo.incDesperfecto}"/>
																				<span class="lbl"> Tuvo desperfecto</span>
																			</label>
																		</div>					
																		<div class="checkbox">
																			<label>
																				<input name="form-field-checkbox" type="checkbox" class="ace" th:field="*{evaluacionVehiculo.incAccidente}"/>
																				<span class="lbl"> Tuvo accidente</span>
																			</label>
																		</div>
																		<div class="checkbox">
																			<label>
																				<input name="form-field-checkbox" type="checkbox" class="ace" th:field="*{evaluacionVehiculo.incMalAC}"/>
																				<span class="lbl"> A/C no funcion&oacute;</span>
																			</label>
																		</div>
																	</div>
																</div>
																<div class="col-xs-8">
																	<div class="space"></div>
																	<label for="comCond">Comentarios</label>		
																	<textarea class="form-control" id="comCond" rows="4" th:field="*{evaluacionVehiculo.comentarios}"></textarea>
																</div>
															</div>
														</div>
													</div>
												</div>
												<div class="col-xs-12">
													<div class="col-xs-6">													
														<div class="col-xs-12 btn-group">
															<div class="space"></div>							
															<button type="submit" class="btn btn-success btn-sm col-xs-2">
																<i class="fa fa-check align-top bigger-150"></i>
																<span>Evaluar</span>
															</button>
															<a href="/historialServicios" th:href="@{/historialServicios}" class="btn btn-sm col-xs-2" >
																<i class="fa fa-times align-top bigger-150"></i>
																Cancelar
															</a>
														</div>	
													</div>
												</div>	
											</form>							
										</div>
									</div>
								</div>
							</div>																		
						</div>						
					</div>	
				</div>					
			</div><!-- /.page-content -->
		
		<style type="text/css">
				.navX{ max-height: 250px; overflow-y:scroll; }
				 #map-canvas-ruta  {
	       		 width: 100%;
	     	     height: 400px;
	    	     }
	    	     .pac-container {
				    background-color: #FFF;
				    z-index: 20;
				    position: fixed;
				    display: inline-block;
				    float: left;
				}
				.modal{
				    z-index: 20;   
				}
				.modal-backdrop{
				    z-index: 10;        
				}
		</style>
		
		<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.2&amp;sensor=false&amp;channel=PE-MAPS&amp;language=es&amp;components=country:PE&amp;libraries=places"></script>
		
		<script src="../../static/custom/jquery.dataTables.min.js" th:src="@{/static/custom/jquery.dataTables.min.js}"></script>
		
		<script th:inline="javascript">
		// <![CDATA[
		            
		//Fix para checkbox ace
		$(function(){
  			$('input[type=checkbox],input[type=radio]').after('<span class="lbl" />');
		});
		        
		var tablaDestinos;		
		
		 $(document).ready(function(){			  
			  
			  tablaDestinos = $('#tabla-destinos').dataTable({
				  "aoColumns": [ 
								null,
								{"sWidth": "30%"},
								null,
								null,
								null,
								null,
								null,
				    			null,
				    			null,
				    			null,
				    			null,
				    			{"bVisible": false},
				    			{"bVisible": false}
				    		],
				   "oLanguage": {
				          "sEmptyTable":     "El servicio no especifica destinos"
				      },
				   "bFilter": false,
				   "bInfo": false,
				   "bLengthChange": false,
				   "bPaginate": false,
				   "bSort": false				   
			  });
		 });	 
		 
			// ]]>
		</script>		
	</body>
</html>